import React from 'react';
// import moment from 'moment';
// import cn from 'classnames';
import PropTypes from 'prop-types';
import Locale from '@/utils/locale';
import styles from './DateRange.less';

const { locale } = new Locale('component.dateRange');

const DateTypes = ({ types, value, onChange }) => {
    const handleClick = (type, e) => {
        e.preventDefault();

        onChange(type);
    };
    return (
        <ul>
            {types.map(type => (
                <li
                    onClick={e => handleClick(type, e)}
                    key={type.type}
                    className={type.type === value ? styles.active : ''}
                >
                    {type.label}
                </li>
            ))}
        </ul>
    );
};

DateTypes.propTypes = {
    types: PropTypes.array,
    value: PropTypes.string,
    onChange: PropTypes.func
};

DateTypes.defaultProps = {
    types: []
};

DateTypes.defaultProps = {
    value: 'year',
    onChange: () => {},
    types: [
        {
            label: locale('week'),
            type: 'week'
        },
        {
            label: locale('month'),
            type: 'month'
        },
        {
            label: locale('square'),
            type: 'quarter'
        },
        {
            label: locale('year'),
            type: 'year'
        }
    ]
};

export default DateTypes;
